<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- H5模式 -->
  <!-- （可选）如果您的使用场景需要用到H5模式的播放器，则需引用此css文件。 -->
  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css" />
  <!-- （必须）引入js文件。 -->
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js"></script>
</head>
<body>
  <div class="">
    <button id="addButton">增加一个视频</button>
    <span>1</span>
    <div id="J_prismPlayer"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      let id2;

      function generateRandomId() {
        // 更安全的随机ID生成方法
        return 'J_prismPlayer_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
      }

      function add() {
        if (!document.getElementById(id2)) {
          id2 = generateRandomId();
          const newDiv = document.createElement('div');
          newDiv.id = id2;
          document.body.appendChild(newDiv);

          new Aliplayer({
            id: id2,
            source: 'http://192.168.0.219:8080/hls/0_4.m3u8', // 播放地址
          });
        }
      }

      document.getElementById('addButton').addEventListener('click', add);

      // 初始化第一个播放器
      new Aliplayer({
        id: 'J_prismPlayer',
        source: 'http://192.168.0.219:8080/hls/0_1.m3u8',
      });
    });
  </script>
</body>
</html>
